<template>
	<view class="container">
		<!-- 顶部状态标签 -->
		<view class="status-tabs">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'in_progress' }"
				@click="switchTab('in_progress')"
			>
				进行中
			</view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'completed' }"
				@click="switchTab('completed')"
			>
				已完成
			</view>
		</view>

		<!-- 筛选区域 -->
		<view class="filter-section">
			<view class="filter-row">
				<text class="filter-label">维修方式:</text>
				<picker 
					:value="repairMethodIndex" 
					:range="repairMethods" 
					range-key="name"
					@change="onRepairMethodChange"
				>
					<view class="filter-dropdown">
						<text class="dropdown-text">{{ selectedRepairMethod.name }}</text>
						<text class="dropdown-arrow">▼</text>
					</view>
				</picker>
			</view>
			<view class="filter-row">
				<text class="filter-label">预约日期:</text>
				<view class="date-range-container">
					<view class="date-item-row">
						<text class="date-label-small">开始:</text>
						<picker 
							mode="date" 
							:value="startDate" 
							@change="onStartDateChange"
						>
							<view class="date-input-small">{{ startDateText }}</view>
						</picker>
						<picker 
							mode="time" 
							:value="startTime" 
							@change="onStartTimeChange"
						>
							<view class="time-input-small">{{ startTime }}</view>
						</picker>
					</view>
					<view class="date-item-row">
						<text class="date-label-small">结束:</text>
						<picker 
							mode="date" 
							:value="endDate" 
							@change="onEndDateChange"
						>
							<view class="date-input-small">{{ endDateText }}</view>
						</picker>
						<picker 
							mode="time" 
							:value="endTime" 
							@change="onEndTimeChange"
						>
							<view class="time-input-small">{{ endTime }}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="orders-list">
			<view 
				class="order-item" 
				v-for="order in filteredOrders" 
				:key="order.id"
				@click="goToOrderDetail(order)"
			>
				<view class="order-header">
					<text class="order-number">维修单号: {{ order.orderNumber }}</text>
				</view>
				<view class="order-info">
					<text class="order-method">维修方式: {{ order.repairMethod }}</text>
				</view>
				<view class="order-info">
					<text class="order-date">预约日期: {{ order.appointmentDate }}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'in_progress', // 当前选中的标签
				// 维修方式选项
				repairMethods: [
					{ id: 'all', name: '全部' },
					{ id: 'in_store', name: '到店维修' },
					{ id: 'door_to_door', name: '上门取车' }
				],
				repairMethodIndex: 0,
				selectedRepairMethod: { id: 'all', name: '全部' },
				// 日期范围
				startDate: '2020-03-02',
				endDate: '2023-03-12',
				startTime: '17:00',
				endTime: '17:00',
				// 订单数据
				orders: [
					{
						id: 1,
						orderNumber: '3535252',
						repairMethod: '到店维修',
						appointmentDate: '2022/11/10 11:00',
						status: 'in_progress',
						ownerName: '张',
						contact: '1993829282',
						vehicleType: '大客车',
						plateNumber: '豫J45323',
						location: '山阳区32号',
						submitDate: '2022/11/08 12:34',
						verificationCode: 'WE343235V'
					},
					{
						id: 2,
						orderNumber: '3535253',
						repairMethod: '上门取车',
						appointmentDate: '2022/11/12 14:00',
						status: 'in_progress',
						ownerName: '李',
						contact: '13800138000',
						vehicleType: '轿车',
						plateNumber: '豫A12345',
						location: '洛龙区',
						submitDate: '2022/11/09 10:20',
						verificationCode: 'WE343236V'
					},
					{
						id: 3,
						orderNumber: '3535254',
						repairMethod: '到店维修',
						appointmentDate: '2022/11/08 09:00',
						status: 'completed',
						ownerName: '王',
						contact: '13900139000',
						vehicleType: 'SUV',
						plateNumber: '豫B67890',
						location: '涧西区',
						submitDate: '2022/11/06 16:45',
						verificationCode: 'WE343237V'
					}
				]
			}
		},
		computed: {
			// 根据当前标签和筛选条件过滤订单
			filteredOrders() {
				let filtered = this.orders.filter(order => order.status === this.activeTab);
				
				// 按维修方式筛选
				if (this.selectedRepairMethod.id !== 'all') {
					const methodMap = {
						'in_store': '到店维修',
						'door_to_door': '上门取车'
					};
					filtered = filtered.filter(order => 
						order.repairMethod === methodMap[this.selectedRepairMethod.id]
					);
				}
				
				// 按日期范围筛选
				filtered = filtered.filter(order => {
					const orderDate = new Date(order.appointmentDate.replace(/\//g, '-'));
					const startDateTime = new Date(`${this.startDate} ${this.startTime}`);
					const endDateTime = new Date(`${this.endDate} ${this.endTime}`);
					return orderDate >= startDateTime && orderDate <= endDateTime;
				});
				
				return filtered;
			},
			// 开始日期显示文本
			startDateText() {
				return this.formatDate(this.startDate);
			},
			// 结束日期显示文本
			endDateText() {
				return this.formatDate(this.endDate);
			}
		},
		methods: {
			// 切换标签
			switchTab(tab) {
				this.activeTab = tab;
			},
			// 维修方式选择
			onRepairMethodChange(e) {
				this.repairMethodIndex = e.detail.value;
				this.selectedRepairMethod = this.repairMethods[e.detail.value];
			},
			// 开始日期变化
			onStartDateChange(e) {
				this.startDate = e.detail.value;
			},
			// 开始时间变化
			onStartTimeChange(e) {
				this.startTime = e.detail.value;
			},
			// 结束日期变化
			onEndDateChange(e) {
				this.endDate = e.detail.value;
			},
			// 结束时间变化
			onEndTimeChange(e) {
				this.endTime = e.detail.value;
			},
			// 格式化日期
			formatDate(dateStr) {
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}年${month}月${day}日`;
			},
			// 跳转到订单详情
			goToOrderDetail(order) {
				uni.navigateTo({
					url: `/pages/other/my-repairorders-details/my-repairorders-details?id=${order.id}&status=${order.status}`
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	/* 状态标签 */
	.status-tabs {
		display: flex;
		background: linear-gradient(135deg, #3183FB 0%, #3183FB 100%);
		padding: 20rpx 0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		color: rgba(255, 255, 255, 0.7);
		font-size: 32rpx;
		position: relative;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: white;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: white;
		border-radius: 2rpx;
	}

	/* 筛选区域 */
	.filter-section {
		background-color: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.filter-row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.filter-row:last-child {
		margin-bottom: 0;
	}

	.filter-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
		width: 120rpx;
	}

	.filter-dropdown {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 10rpx;
		border: 2rpx solid #e9ecef;
	}

	.dropdown-text {
		font-size: 28rpx;
		color: #333;
	}

	.dropdown-arrow {
		font-size: 24rpx;
		color: #666;
	}

	.date-picker {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 10rpx;
		border: 2rpx solid #e9ecef;
	}

	.date-text {
		font-size: 28rpx;
		color: #333;
	}

	.date-icon {
		font-size: 24rpx;
	}

	/* 新的日期范围容器样式 */
	.date-range-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.date-item-row {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.date-label-small {
		font-size: 24rpx;
		color: #666;
		width: 60rpx;
	}

	.date-input-small,
	.time-input-small {
		flex: 1;
		padding: 15rpx 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		border: 2rpx solid #e9ecef;
		font-size: 24rpx;
		color: #333;
		text-align: center;
		min-width: 0;
	}

	.time-input-small {
		flex: 0 0 120rpx;
	}

	/* 订单列表 */
	.orders-list {
		padding: 0 30rpx;
	}

	.order-item {
		background-color: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.order-header {
		margin-bottom: 15rpx;
	}

	.order-number {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.order-info {
		margin-bottom: 10rpx;
	}

	.order-info:last-child {
		margin-bottom: 0;
	}

	.order-method,
	.order-date {
		font-size: 26rpx;
		color: #666;
	}

</style>